import { useSelector,useDispatch } from "react-redux";
import "./Container.scss";
import DrawRule from "@/plugins/rule/rule";
// web可视化视图
import WebPanel from "./WebPanel/WebPanel";

function Container() {
  const dispatch=useDispatch()
  // 编辑器全局初始化配置
  const {
    webConfig: { width: webPanelWidth, },
    global:{scale,ruleWidth,scaleContainerMargin,unitsNum}
  } = useSelector((state) => (state as any).editor.editorConfig);
 
  // 刻度尺top，left
  const ruleOffset =ruleWidth + scaleContainerMargin;

  // 容器
  const legoContainerDom = useRef(null);
  // 可滚动容器
  const legoScrollDom = useRef(null);
  // 刻度尺
  const [legoRuleXDom, legoRuleYDom] = [useRef(null), useRef(null)];
  // 刻度尺实例化对象
  const [legoRuleX, legoRuleY] = [useRef(null), useRef(null)];
  // 容器缩放比
  // 横向滚动条偏移量
  let [ruleOffsetX, setRuleOffsetX] = useState(1);
  // 垂直滚动条偏移量
  let [ruleOffsetY, setRuleOffsetY] = useState(1);

  //   空数组依赖,只在首次渲染时执行一次
  useEffect(() => {
    // 全局初始化配置
    init();

    // 滚动
    const scrollElement = legoScrollDom.current;
    // 添加滚动事件监听器
    const handleScroll = (e) => {
      legoRuleX.current.translateRule(scrollElement.scrollLeft);
      legoRuleY.current.translateRule(scrollElement.scrollTop);
    };

    scrollElement.addEventListener("scroll", handleScroll);

    return () => {
      // 移除滚动事件监听器
      scrollElement.removeEventListener("scroll", handleScroll);
    };
  }, []);
  // 初始化
  const init = () => {
    // 计算容器宽高
    const containerWidth = window.screen.width;
    const containerHeight = window.screen.height;
    // 获取拖拽容器尺寸
    const scrollContainerWidth =
      legoScrollDom.current.offsetWidth - scaleContainerMargin * 2;
    // 缩放倍数
    const scale = scrollContainerWidth / webPanelWidth;
    // x轴刻度尺初始化
    legoRuleX.current = new DrawRule(legoRuleXDom.current, {
      scale,
      unitsNum,
      type: "x",
      width: containerWidth,
      height: ruleWidth,
      labelOffsetX: 4,
      labelOffsetY: -4,
    });
    // y轴刻度尺初始化
    legoRuleY.current = new DrawRule(legoRuleYDom.current, {
      scale,
      unitsNum,
      width: ruleWidth,
      height: containerHeight,
      type: "y",
      labelOffsetX: -4,
      labelOffsetY: -4,
    });
    // 容器缩放
    dispatch({type:"editor/changeScale",payload:{scale}})
  };
  // 缩放
  // const changeScale = (type) => {
  //   let scale = null;
  //   if (type === "increaseScale") {
  //     scale = (containerScale * 10 + initConfig.unitsNum * 10) / 10;
  //   } else {
  //     scale = (containerScale * 10 - initConfig.unitsNum * 10) / 10;
  //   }
  //   setContainerScale(scale);
  //   legoRuleX.current[type]();
  //   legoRuleY.current[type]();
  // };
  // // 重置
  // const reset = () => {
  //   legoRuleX.current.reset();
  //   legoRuleY.current.reset();
  //   setContainerScale(initConfig.initScale);
  // };

  return (
    <>
      <div
        id="lego-editor-container"
        ref={legoContainerDom}
        style={
          {
            paddingLeft: ruleWidth+ "px",
            paddingTop: ruleWidth + "px",
          } as React.CSSProperties
        }
      >
        <div
          className="lego-editor-container-rule"
          style={{ left: ruleOffset }}
        >
          <canvas ref={legoRuleXDom}></canvas>
        </div>
        <div className="lego-editor-container-rule" style={{ top: ruleOffset }}>
          <canvas ref={legoRuleYDom}></canvas>
        </div>
        <div className="lego-editor-container-scroll" ref={legoScrollDom}>
          <div
            className="lego-editor-container-scale"
            style={{ transform: ` scale(${scale})` }}
          >
            {/* 填充组件容器 */}
            <WebPanel></WebPanel>
          </div>
        </div>
      </div>
    </>
  );
}
export default Container;
